<template>
  <div>
    <Modal :title="modalTitle"
           v-model="modalVisible"
           :mask-closable="false"
           :width="550"
           :styles="{top: '200px'}"
           :footer-hide="true">
      <div>
        <Row>
          <Col span="7">
          <div class="detail-content">
            <p class="detail-text">车辆总数：{{areaDetail.totalCarCount}}</p>
            <p class="detail-text">今日上线数：{{areaDetail.dayOnlineCount}}</p>
            <p class="detail-text">实时上线数：{{areaDetail.nowOnlineCount}}</p>
            <p class="detail-text">报警次数：{{areaDetail.alarmCount}}</p>
          </div>
          </Col>
          <Col span="17">
          <div id="areaDetailPie"
               style="width:400px;height:260px;"></div>
          </Col>
        </Row>
      </div>
    </Modal>
  </div>
</template>

<script>
import echarts from 'echarts'
import { getHomeArea } from '@/api/index'
export default {
  name: 'homeMap',
  props: {
    modalShow: {
      type: Boolean,
      default: true
    },
    areaName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      myChart: null,
      modalVisible: false,
      modalTitle: '',
      areaDetail: {
        dangerCount: 0,
        nowOnlineCount: 0,
        alarmCount: 0,
        passengerCount: 0,
        travelCount: 0,
        dayOnlineCount: 0,
        totalCarCount: 0
      }
    }
  },
  watch: {
    modalShow(curVal, oldVal) {
      this.modalVisible = curVal
      if (curVal) {
        this.getHomeArea(this.areaName)
        this.modalTitle = this.areaName
      }
    }
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById('areaDetailPie'))
    let me = this
    window.addEventListener('resize', function() {
      me.myChart.resize()
    })
  },
  methods: {
    getHomeArea(areaName) {
      getHomeArea({ areaName: areaName }).then(res => {
        if (res.code == 0) {
          this.areaDetail = res.data.areaCount
          this.setOption(res.data.areaCount)
        }
      })
    },
    setOption(areaCount) {
      let option = {
        color: [
          '#5867dd',
          '#fd27eb',
          '#6610f2',
          '#6f42c1',
          '#e83e8c',
          '#dc3545',
          '#1dc9b7',
          '#2786fb',
          '#ffb822',
          '#fd7e14',
          '#ffc107',
          '#28a745',
          '#20c997',
          '#17a2b8',
          '#e1e1ef',
          '#007bff'
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        // legend: {
        //   orient: "vertical",
        //   x: "left",
        //   data: [
        //     "实时上线数",
        //     "离线数",
        //     "班线客运",
        //     "旅游客运",
        //     "危险货物运输",
        //     "普通货运"
        //   ]
        // },
        series: [
          {
            name: '车辆类型',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],

            label: {
              normal: {
                position: 'inner'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: areaCount.nowOnlineCount,
                name: '实时上线数'
              },
              {
                value: areaCount.totalCarCount - areaCount.nowOnlineCount,
                name: '离线数'
              }
            ]
          },
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '55%'],

            data: [
              { value: areaCount.passengerCount, name: '班线客运' },
              { value: areaCount.travelCount, name: '旅游客运' },
              { value: areaCount.dangerCount, name: '危险货物运输' },
              { value: areaCount.generalCount, name: '普通货运' }
            ]
          }
        ]
      }

      this.myChart.setOption(option)
    }
  }
}
</script>
<style lang="less" scoped>
.detail-content {
  padding: 25px 5px;
  .detail-text {
    font-size: 18px;
    padding: 2px;
  }
}
</style>


